﻿* {
    margin:0;
    padding:0;
}
body {
    margin:0;
    padding:0;
}

@font-face {
    font-family:"LokiCola";
    src:url('fonts/LOKICOLA.TTF') format('truetype');
    font-stretch:normal;
    font-weight:normal;
    font-style:normal;
}

header {
    color:hsla(60,100%,50%, 0.5);
    /*background: linear-gradient(30deg, blue, green, yellow);*/
    height:100px;
    width:100%;
    /*
    transform: translate3d(10px, 50px, 10px);
    -moz-transform: translate3d(10px, 50px, 10px);*/
   
}

header h1 {
    font-family: 'LokiCola';
    font-size:5em;
    margin-left:10px;
    margin-top:3px;
    word-spacing:1rem;
    text-shadow:-5px 4px 6px #323;
}

    header h1:before {
        content:" \201C ";
        position:relative;
        left:-5px;
    }

body {
}

section:first-of-type {
    padding:10px;
    text-align:justify;
    -moz-column-count:3;
    -moz-column-gap:3rem;
    -moz-column-rule:1px solid black;
    column-count:3;
    column-gap:3rem;
    column-rule:1px solid black;
}

    section:first-of-type::first-letter {
        font-family: 'LokiCola';
        font-size:2em;
    }

    section:first-of-type::first-line {
        color:red;
    }


/*  DINAMICA LAYOUT----- **/
article {
    padding:10px;
    border:2px solid red;
}

    article div {
        margin:10px;
        padding:5px;
        border:2px solid black;
        width:150px;
        height:150px;
        display:table-cell;
    }

        article div:nth-child(odd) {
            font-size:4rem;
        }

/*  ORDEM CORRETA DE USO DO a:----- **/

a:link {
}
    a:link:hover {
    }
a:visited {
}
    a:visited:hover {
    }
a:focus {
}
a:hover {
}
a:active {
}

/*  PSEUDO-CLASSES DO INPUT----- **/

input:enabled {
}
input:disabled {
}
input:checked {
}

/*  draw - - - - **/
#circulo {
    width:200px;
    height:200px;
    background-color:blue;
    border-radius:50%;
    position:relative;
    left:150px;
    top:220px;
}

#triangulo {
    width:0;
    height:0;
    border-top:200px solid #c3c3c3;
    border-right:200px solid transparent;
    transform: rotate(45deg);
    position:relative;
    left:150px;
    margin:0;
}